<!DOCTYPE html><html lang="[&quot;zh-Hans&quot;,&quot;zh-CN&quot;,&quot;default&quot;]"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="Nextjs+React+KOA-1"><meta name="keywords" content="ssr,nextjs"><meta name="author" content="wenmu"><meta name="copyright" content="wenmu"><title>Nextjs+React+KOA-1 | 温木的博客</title><link rel="shortcut icon" href="/melody-favicon.ico"><link rel="stylesheet" href="/css/index.css?version=1.6.1"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.6.1"><link rel="dns-prefetch" href="https://cdn.staticfile.org"><link rel="dns-prefetch" href="https://cdn.bootcss.com"><link rel="dns-prefetch" href="https://creativecommons.org"><link rel="dns-prefetch" href="http://ta.qq.com"><script>(function() {
   var hm = document.createElement("script");
   hm.src = "https://tajs.qq.com/stats?sId=&lt;script type=&quot;text/javascript&quot; src=&quot;http://tajs.qq.com/stats?sId=66523541&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(hm, s);
 })();</script><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  }
} </script><meta name="generator" content="Hexo 4.2.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#next-js-koa-笔记"><span class="toc-number">1.</span> <span class="toc-text">next.js koa 笔记</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#运行"><span class="toc-number">1.0.1.</span> <span class="toc-text">运行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#next-默认不支持-css-文件"><span class="toc-number">1.0.2.</span> <span class="toc-text">next 默认不支持 css 文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用-antd"><span class="toc-number">1.0.3.</span> <span class="toc-text">使用 antd</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#解决-antd-样式问题"><span class="toc-number">1.0.4.</span> <span class="toc-text">解决 antd 样式问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#getInitialProps"><span class="toc-number">1.0.5.</span> <span class="toc-text">getInitialProps</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#自定义-App"><span class="toc-number">1.0.6.</span> <span class="toc-text">自定义 App</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#style-css"><span class="toc-number">1.0.7.</span> <span class="toc-text">style-css</span></a></li></ol></li></ol></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="https://i.loli.net/2020/02/27/xwaBoOj158MfNyq.jpg"></div><div class="author-info__name text-center">wenmu</div><div class="author-info__description text-center">记录一些在工作中或学习新知识时学到的一些知识点；正所谓好记性不如一个烂笔头，温故而知新！</div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">115</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">52</span></a><a class="author-info-articles__categories article-meta" href="/categories"><span class="pull-left">分类</span><span class="pull-right">30</span></a></div></div></div><div id="content-outer"><div class="no-bg" id="top-container"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">温木的博客</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus"><a class="site-page" href="/">首页</a><a class="site-page" href="/archives">文章</a><a class="site-page" href="/tags">标签</a><a class="site-page" href="/categories">分类</a></span></div><div id="post-info"><div id="post-title">Nextjs+React+KOA-1</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2020-01-09</time><span class="post-meta__separator">|</span><i class="fa fa-inbox post-meta__icon" aria-hidden="true"></i><a class="post-meta__categories" href="/categories/react/">react</a></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><h1 id="next-js-koa-笔记"><a href="#next-js-koa-笔记" class="headerlink" title="next.js koa 笔记"></a>next.js koa 笔记</h1><p>nextjs 是自身带有服务器，但它这个服务器只是用于处理 ssr 服务器渲染。像 http 请求数据，数据库连接、session 状态这些操作 nextjs 的这个服务都不处理，所以需要使用 koa 等类似的服务，手动来处理。</p>
<a id="more"></a>

<h3 id="运行"><a href="#运行" class="headerlink" title="运行"></a>运行</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node server.js</span><br></pre></td></tr></table></figure>

<h3 id="next-默认不支持-css-文件"><a href="#next-默认不支持-css-文件" class="headerlink" title="next 默认不支持 css 文件"></a>next 默认不支持 css 文件</h3><blockquote>
<p>从服务端原理讲解课程中了解到，<code>style-loader</code>无法把<code>css</code>挂载到页面上，因为服务端渲染不生成<code>html</code>文件，所以即使生成了<code>css</code>文件，也没地方挂，服务端返回的直接是 html 字符串。所以需要使用<code>isomorphic-style-loader</code>，使用这个<code>loader</code>，在组件中可以以对象的方式获取到引用的<code>css</code>，然后把<code>css</code>内容放到<code>context</code>的全局对象中，在返回<code>html</code>内容时把全局中的 css 字符串都拼接好，然后拼到<code>html</code>字符串中。</p>
</blockquote>
<p>添加 nextjs 的配置文件，在根目录创建<code>next.config.js</code>，使用官网推荐的<code>@zeit/next-css</code><br>安装：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i @zeit&#x2F;next-css</span><br></pre></td></tr></table></figure>

<p>在配置文件中添加</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">const withCss &#x3D; require(&quot;@zeit&#x2F;next-css&quot;);</span><br><span class="line"></span><br><span class="line">if (typeof require !&#x3D;&#x3D; &quot;undefined&quot;) &#123;</span><br><span class="line">  require.extensions[&quot;.css&quot;] &#x3D; file &#x3D;&gt; &#123;&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">module.exports &#x3D; withCss(&#123;&#125;);</span><br></pre></td></tr></table></figure>

<p>这样就可以在组件中<code>import css</code>文件了，并且生成的是 css 的 chunk 文件并在文件中引用，而不像 style-loader 那样是把 css 内容直接插进 html 中。</p>
<h3 id="使用-antd"><a href="#使用-antd" class="headerlink" title="使用 antd"></a>使用 antd</h3><p>安装</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i and --save</span><br></pre></td></tr></table></figure>

<p>###配置 antd 的按需加载<br>官网推荐了两种方式，一种是使用<code>babel-import-plugin</code>，</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; .babelrc or babel-loader option</span><br><span class="line">&#123;</span><br><span class="line">  &quot;plugins&quot;: [</span><br><span class="line">    [&quot;import&quot;, &#123;</span><br><span class="line">      &quot;libraryName&quot;: &quot;antd&quot;,</span><br><span class="line">      &quot;libraryDirectory&quot;: &quot;es&quot;,</span><br><span class="line">      &quot;style&quot;: &quot;css&quot; &#x2F;&#x2F; &#96;style: true&#96; 会加载 less 文件 -------注意：ssr这个不能配置</span><br><span class="line">    &#125;]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>一种是使用绝对路径来引入每个组件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import DatePicker from &#39;antd&#x2F;es&#x2F;date-picker&#39;; &#x2F;&#x2F; 加载 JS</span><br><span class="line">import &#39;antd&#x2F;es&#x2F;date-picker&#x2F;style&#x2F;css&#39;; &#x2F;&#x2F; 加载 CSS</span><br><span class="line">&#x2F;&#x2F; import &#39;antd&#x2F;es&#x2F;date-picker&#x2F;style&#39;;         &#x2F;&#x2F; 加载 LESS</span><br></pre></td></tr></table></figure>

<p>第一种使用方便，使用第一种方式，打包的时候，babel 会转换成第二种，所以推荐第一种。</p>
<h3 id="解决-antd-样式问题"><a href="#解决-antd-样式问题" class="headerlink" title="解决 antd 样式问题"></a>解决 antd 样式问题</h3><p>上面的标注写了，无法配置样式的引入，所以需要在手动来处理。<br>###_app.js<br><code>_app.js</code>是覆盖 nextjs 默认 app 组件的地方。<br>在 pages 文件夹中新建<code>_app.js</code>文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">import App from &quot;next&#x2F;app&quot;;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 引入antd的样式，但这样会把所有的样式都引入进来，可以通过配置babel来解决，但是现在支持不好</span><br><span class="line">import &quot;antd&#x2F;dist&#x2F;antd.css&quot;;</span><br><span class="line"></span><br><span class="line">export default App;</span><br></pre></td></tr></table></figure>

<p>这样 andt 的组件就有样式了。</p>
<p>###前端路由跳转</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">import Link from &#39;next&#x2F;link&#39;</span><br><span class="line"></span><br><span class="line">&lt;Link href&#x3D;&quot;&#x2F;a&quot; title&#x3D;&quot;desc&quot;&gt;</span><br><span class="line">    &lt;Button&gt;click &lt;&#x2F;Button&gt;</span><br><span class="line">&lt;&#x2F;Link&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>Link 本身是没有标签的（可以 F12 查看），所以需要指定渲染的内容，必须给它传递一个有 onclick 的组件，Link 就是给他的子组件绑定 click 事件，click 事件跳转到指定的路径。并且 Link 只能有一个直接子节点。</p>
</blockquote>
<p>####手动跳转</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import Router from &#39;next&#x2F;router&#39;</span><br><span class="line"></span><br><span class="line">Router.push(&#39;a&#x2F;b&#39;)</span><br></pre></td></tr></table></figure>

<p>###动态路由</p>
<ul>
<li>query 参数<br>接收的时候需要用到<code>next/Router</code></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">import &#123;withRouter&#125; from &#39;next&#x2F;router</span><br><span class="line"></span><br><span class="line">const A&#x3D;(&#123;router&#125;)&#x3D;&gt;&lt;span&gt;A&#123;router.query.Id&#125;&lt;&#x2F;span&gt;</span><br><span class="line"></span><br><span class="line">export default withRouter(A)</span><br></pre></td></tr></table></figure>

<ul>
<li>路由映射<br>使用 as 属性定义显示的方式</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;LInk href&#x3D;&quot;&#x2F;a?id&#x3D;1&quot; as &#x3D;&quot;&#x2F;a&#x2F;1&quot; &gt;</span><br></pre></td></tr></table></figure>

<p>这样<code>/a?id=1</code>会被显示成<code>/a/1</code>; 但这有个问题，当刷新的时候就会出现 404，因为这种映射是在前端的，服务端并没有<code>/a/1</code>的资源。<br>因此服务端需要对<code>/a/1</code>的请求做下处理，转换成原来的<code>/a?id=1</code>；使用 koa 的 router</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">const router &#x3D; new Router()</span><br><span class="line">router.get(&#39;&#x2F;a&#x2F;:id&#39;,(ctx)&#x3D;&gt;&#123;</span><br><span class="line">    const id&#x3D;ctx.params.id;</span><br><span class="line">    handle&#x3D;(ctx.req,ctx.res,&#123;</span><br><span class="line">          pathname:&#39;&#x2F;a&#39;,</span><br><span class="line">          query:&#123;</span><br><span class="line">            id</span><br><span class="line">          &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">ctx.respond&#x3D;false;</span><br><span class="line">&#125;)</span><br><span class="line">server.use(router.routes())</span><br></pre></td></tr></table></figure>

<h3 id="getInitialProps"><a href="#getInitialProps" class="headerlink" title="getInitialProps"></a>getInitialProps</h3><p>只有放在 pages 文件下的 getInitialProps 才会被调用;具体内容查看官网介绍；</p>
<ul>
<li>在页面中获取数据</li>
<li>在 App 文件中获取数据<br>需要注意的是：<blockquote>
<p>如果在 getinitialProps 中异步获取数据，当点击 Link 进行跳转时，等到异步数据获取到才会跳转过去，这就会有延迟的问题。点击跳转可能半天才过去。</p>
</blockquote>
</li>
</ul>
<h3 id="自定义-App"><a href="#自定义-App" class="headerlink" title="自定义 App"></a>自定义 App</h3><p><code>nextjs</code>的<code>app</code>(也就是<code>_app.js</code>)相当于母版、基类的作用。我的理解就是一个高阶组件。pages 文件夹下的每个页面都会经过 App 进行“包装”。<br>app 的作用：</p>
<blockquote>
<ul>
<li>固定 Laout</li>
<li>保持一些公共的状态</li>
<li>给页面传入一些自定义数据</li>
<li>自定义错误处理</li>
</ul>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">import App, &#123; Container &#125; from &quot;next&#x2F;app&quot;;</span><br><span class="line">import &quot;antd&#x2F;dist&#x2F;antd.css&quot;;</span><br><span class="line"></span><br><span class="line">class MyApp extends App &#123;</span><br><span class="line">  &#x2F;&#x2F;每次页面跳转都会执行这个方法；</span><br><span class="line">  &#x2F;&#x2F;如果组件中也定义了这个方法，则需要在这手动执行,并把返回数据传给组件</span><br><span class="line">  static async getInitialProps(&#123; Component,ctx &#125;) &#123;</span><br><span class="line">    let pageProps;</span><br><span class="line">    if (Component.getInitialProps) &#123;</span><br><span class="line">      pageProps &#x3D; await Component.getInitialProps(ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    return pageProps;</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    &#x2F;&#x2F; Component就是pages文件夹下的组件</span><br><span class="line">    const &#123; Component, pageProps &#125; &#x3D; this.props;</span><br><span class="line">    &#x2F;&#x2F;需要使用Container进行包裹</span><br><span class="line">    &lt;Container&gt;</span><br><span class="line">      &lt;div&gt;公共部分&lt;&#x2F;div&gt;</span><br><span class="line">      &lt;Component &#123;...pageProps&#125; &#x2F;&gt;</span><br><span class="line">    &lt;&#x2F;Container&gt;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">export default App;</span><br></pre></td></tr></table></figure>

<p>###自定义 document<br>document 是只有在服务端渲染的时候才会被调用。<br>用来修改服务端渲染的文档内容。<br>一般用来配合第三方 css-in-js 方案使用。<br>创建和_app.js 一样，在 pages 文件夹下创建下划线开头的文件<code>_document.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">import Document, &#123; Html, Head, Main, NextScript &#125; from &quot;next&#x2F;document&quot;;</span><br><span class="line"></span><br><span class="line">class MyDocument extends Document &#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;Html&gt;</span><br><span class="line">        &lt;Head&gt;</span><br><span class="line">          &lt;title&gt;my doc&lt;&#x2F;title&gt;</span><br><span class="line">          &lt;style&gt;&#123;&#96;.myClass&#123; color:red;&#125;&#96;&#125;&lt;&#x2F;style&gt;</span><br><span class="line">        &lt;&#x2F;Head&gt;</span><br><span class="line">        &lt;body className&#x3D;&quot;myClass&quot;&gt;</span><br><span class="line">          &lt;Main&gt;&lt;&#x2F;Main&gt;</span><br><span class="line">          &lt;NextScript &#x2F;&gt;</span><br><span class="line">        &lt;&#x2F;body&gt;</span><br><span class="line">      &lt;&#x2F;Html&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">export default MyDocument;</span><br></pre></td></tr></table></figure>

<h3 id="style-css"><a href="#style-css" class="headerlink" title="style-css"></a>style-css</h3><p>是组件级的，每个组件中的样式不会影响其他组件，组件和组件之间是隔离的，即使定义的是 global 的，也是组件级的。每个组件的元素上会添加一个类似<code>jsx-12342131231</code>的样式，这就是组件隔离的原因所在。并且当组件别卸载时，样式也会被删除，所以不会影响其他组件的样式。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;style jsx&gt;</span><br><span class="line">  &#123;&#96;</span><br><span class="line">    .fontSize &#123;</span><br><span class="line">      font-size: 20px;</span><br><span class="line">      color: green;</span><br><span class="line">    &#125;</span><br><span class="line">  &#96;&#125;</span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>

<p>上面的样式在元素上就会是<code>jsx-32342342 fontSize</code>;<br>但如果同一个页面中的两个子组件都定义了相同的全局样式，还是会影响的（废话）。</p>
<p>###LazyLoading</p>
<ul>
<li>异步加载模块</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const moment &#x3D; await import(&quot;moment&quot;);</span><br><span class="line">&#x2F;&#x2F;注意：这是要先调用default</span><br><span class="line">const time&#x3D;moment.default(Date.now() - 60 * 1000 * 2).fromNow(),</span><br></pre></td></tr></table></figure>

<ul>
<li>异步加载组件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import dynamic from &quot;next&#x2F;dynamic&quot;;</span><br><span class="line"></span><br><span class="line">const DynamicDemo &#x3D; dynamic(import(&quot;.&#x2F;DynamicDemo&quot;));</span><br></pre></td></tr></table></figure>

<p>###next.config.js 的配置<br>这个文件就是让我们来重置 nextjs 的配置。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">const config &#x3D; &#123;</span><br><span class="line">  &#x2F;&#x2F; 编译文件的输出目录</span><br><span class="line">  distDir: &quot;build&quot;,</span><br><span class="line">  &#x2F;&#x2F; 是否给每个路由生成Etag,这是用来进行缓存验证用的。如果ngix有配置，这个可以关闭，提高性能</span><br><span class="line">  generateEtags: true,</span><br><span class="line">  &#x2F;&#x2F; 页面内容缓存策略</span><br><span class="line">  onDemandEntries: &#123;</span><br><span class="line">    &#x2F;&#x2F; 内容在内存中缓存的时长(ms)</span><br><span class="line">    maxInactiveAge: 25 * 1000,</span><br><span class="line">    &#x2F;&#x2F; 同时缓存多少个页面</span><br><span class="line">    pagesBufferLength: 2,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#x2F;&#x2F; 在pages目录下哪种后缀的文件会被认为是页面</span><br><span class="line">  pageExtensions: [&quot;jsx&quot;, &quot;js&quot;],</span><br><span class="line">  &#x2F;&#x2F; 配置buildId</span><br><span class="line">  generateBuildId: async () &#x3D;&gt; &#123;</span><br><span class="line">    if (process.env.YOUR_BUILD_ID) &#123;</span><br><span class="line">      return process.env.YOUR_BUILD_ID;</span><br><span class="line">    &#125;</span><br><span class="line">    &#x2F;&#x2F; 返回null使用默认的unique id</span><br><span class="line">    return null;</span><br><span class="line">  &#125;,</span><br><span class="line">  &#x2F;&#x2F; 修改webpack的配置</span><br><span class="line">  webpack(config, options) &#123;</span><br><span class="line">    return config;</span><br><span class="line">  &#125;,</span><br><span class="line">  &#x2F;&#x2F; 修改webpackDevMiddleware配置</span><br><span class="line">  webpackDevMiddleware: config &#x3D;&gt; &#123;</span><br><span class="line">    return config;</span><br><span class="line">  &#125;,</span><br><span class="line">  &#x2F;&#x2F; 可以在页面上通过 process.env.customKey 获取value</span><br><span class="line">  env: &#123;</span><br><span class="line">    yourKey: &quot;your value&quot;,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#x2F;&#x2F; 下面两个要通过 &#39;next&#x2F;config&#39; 来读取</span><br><span class="line">  &#x2F;&#x2F; 只有在服务器渲染时才会获取的配置</span><br><span class="line">  serverRuntimeConfig: &#123;</span><br><span class="line">    mySecret: &quot;secret&quot;,</span><br><span class="line">    secondSecret: process.env.SECOND_SECRET,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#x2F;&#x2F; 在服务端渲染和客户端渲染都可以获取的配置</span><br><span class="line">  publicRuntimeConfig: &#123;</span><br><span class="line">    staticFolder: &quot;&#x2F;static&quot;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>###redux-devtools-extension 的使用<br>安装后，把 applyMiddleware 传给它的方法即可。</p>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">wenmu</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://blog.wangpengpeng.site/2020/01/09/Nextjs+React+KOA-1/">http://blog.wangpengpeng.site/2020/01/09/Nextjs+React+KOA-1/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://blog.wangpengpeng.site">温木的博客</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/ssr/">ssr</a><a class="post-meta__tags" href="/tags/nextjs/">nextjs</a></div><div class="post-qr-code"><div class="post-qr-code-item"><img class="post-qr-code__img" src="https://i.loli.net/2020/02/27/hOBzIxFDJMCrmtN.jpg"><div class="post-qr-code__desc">微信打赏</div></div></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2020/01/09/JavaScript%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F/"><i class="fa fa-chevron-left">  </i><span>JavaScript异步加载的三种方式</span></a></div><div class="next-post pull-right"><a href="/2020/01/09/Nextjs+React+KOA-2/"><span>Nextjs+React+KOA-2</span><i class="fa fa-chevron-right"></i></a></div></nav><div id="vcomment"></div><script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script><script>var notify = 'false' == true ? true : false;
var verify = 'false' == true ? true : false;
var GUEST_INFO = ['nick','mail','link'];
var guest_info = 'nick,mail,link'.split(',').filter(function(item){
  return GUEST_INFO.indexOf(item) > -1
});
guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
window.valine = new Valine({
  el:'#vcomment',
  notify:notify,
  verify:verify,
  appId:'U1QqpeQNuBnRsfygHk1GQ30q-gzGzoHsz',
  appKey:'dunDQzEseDzgsKgw4qLQcog1',
  placeholder:'支持markdown！',
  avatar:'wavatar',
  guest_info:guest_info,
  pageSize:'20',
  lang: 'zh-cn'
})</script></div></div><footer><div class="layout" id="footer"><div class="copyright">&copy;2019 - 2020 By wenmu</div><div class="framework-info"><span>驱动 - </span><a href="http://hexo.io" target="_blank" rel="noopener"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a href="https://github.com/Molunerfinn/hexo-theme-melody" target="_blank" rel="noopener"><span>Melody</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv">该文访问量<span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.6.1"></script><script src="/js/fancybox.js?version=1.6.1"></script><script src="/js/sidebar.js?version=1.6.1"></script><script src="/js/copy.js?version=1.6.1"></script><script src="/js/fireworks.js?version=1.6.1"></script><script src="/js/transition.js?version=1.6.1"></script><script src="/js/scroll.js?version=1.6.1"></script><script src="/js/head.js?version=1.6.1"></script><script>if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
}</script></body></html>